<template>
	<!-- 个人认证 -->
	<view class="">
		<cu-custom :bgcolor="'#fff'" />
		<scroll-view scroll-y="true" :style="'height:'+scorllHeight+ 'px;'">
			<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="form">
				<view class="pdf-box p-2 bg-white">
					<view class="pl-2 pr-2" id="top">
						<uni-forms-item required label="分类" name="category" labelWidth="120">
							<uni-data-select v-model="formData.category" :localdata="categoryList"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item required name="goods_name" label="商品名称" labelWidth="120">
							<uni-easyinput type="text" v-model="formData.goods_name" placeholder="请输入商品名称" />
						</uni-forms-item>
						<uni-forms-item required label="店内分类" name="supplier_cat_id" labelWidth="120">
							<uni-data-picker placeholder="请选择分类" popup-title="请选择分类" :localdata="shopClassList"
								v-model="formData.supplier_cat_id" @change="onchange" @nodeclick="onnodeclick"
								@popupopened="onpopupopened" @popupclosed="onpopupclosed">
							</uni-data-picker>
						</uni-forms-item>
						<uni-forms-item required name="xfxz_goods_weight" label="商品重量(KG)" label-width="120">
							<uni-easyinput type="digit" v-model="formData.xfxz_goods_weight" placeholder="请输入商品重量" />
						</uni-forms-item>
						<uni-forms-item required name="market_price" label="商品价格(元)" label-width="120">
							<uni-easyinput type="number" v-model="formData.market_price" placeholder="请输入商品价格" />
						</uni-forms-item>
					</view>
					<view class="upload-box p-2">
						<p class="font-sm text-danger">* 以下所需上传的图片仅支持JPG/PNG格式，图片大小需要5M以内</p>
						<view class="id d-flex flex-row j-sb">
							<uploadImage :limit="1" headTitle="上传商品图" :imageValue="imageValue" @imgurl="getImgUrl" />
						</view>
						<uni-forms-item label="商品库存" label-width="120">
							<uni-easyinput type="number" v-model="formData.goods_number" placeholder="请输入商品库存" />
						</uni-forms-item>
						<uni-forms-item label="是否限购" labelWidth="120">
							<radio-group class="d-flex" @change="showInNav">
								<label v-for="(item, index) in items" :key="item.value" class="d-flex">
									<view>
										<radio :value="item.value" :checked="index == showInnav"
											style="transform:scale(0.7)" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item label="起购数量" label-width="120">
							<uni-easyinput type="number" v-model="formData.first_buy" placeholder="请输入起购数量" />
						</uni-forms-item>
						<uni-forms-item label="限购数量" label-width="120">
							<uni-easyinput type="number" v-model="formData.restricted_buy" placeholder="请输入限购数量" />
						</uni-forms-item>
						<!-- <uni-forms-item label="开始日期" label-width="120">
							<uni-datetime-picker disabled type="date" :clear-icon="false"
								v-model="formData.restricted_buy_start" />
						</uni-forms-item>
						<uni-forms-item label="结束日期" label-width="120">
							<uni-datetime-picker disabled type="date" :clear-icon="false"
								v-model="formData.restricted_buy_end" />
						</uni-forms-item> -->
						<uni-forms-item label="商品排序" label-width="120">
							<uni-easyinput type="number" v-model="formData.sort_order" placeholder="请输入排序" />
						</uni-forms-item>
						<uni-forms-item label="商品备注" label-width="120">
							<uni-easyinput type="textarea" autoHeight v-model="formData.goods_contents"
								placeholder="请输入商品备注" />
						</uni-forms-item>
						<!-- 如果选择是蟹券 -->
						<uni-forms-item v-if="formData.category === 2" required name="money" label="蟹券金额"
							label-width="120">
							<uni-data-select v-model="formData.money" :localdata="xqMoneyList"
								@change="changeXqMoney"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item v-if="formData.category === 2" required name="commitment" label="蟹券金额承担"
							label-width="120">
							<uni-data-select v-model="formData.commitment" :localdata="otherMoneyList"
								@change="changeOtherMoney"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item v-if="formData.category === 2" required name="ava" label="使用条件"
							label-width="120">
							<uni-data-select v-model="formData.ava" :localdata="filterMoneyList"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item v-if="formData.category === 2" required name="start_time" label="蟹券开始日期"
							label-width="120">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.start_time" />
						</uni-forms-item>
						<uni-forms-item v-if="formData.category === 2" required name="end_time" label="蟹券结束日期"
							label-width="120">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.end_time" />
						</uni-forms-item>
						<!-- 如果选择是蟹券 -->
						<!-- required :rules="[{'required': true,errorMessage: '请输入规格'}]"
							:name="['dynamicLists',index,'goods_specifications']" -->
						<!-- <uni-forms-item label="商品规格" labelWidth="120">
							<uni-forms :modelValue="formGGData" ref="ggForm" label-position="top" idateTrigger="blur">
								<view class="size mb-2" v-for="(item, index) in formGGData.dynamicLists" :key="index">
									<view class="size-box">
										
										<uni-forms-item label="规格" labelWidth="120" :key="item.id">
											<uni-easyinput v-model="formGGData.dynamicLists[index].goods_specifications"
												placeholder="请输入规格" />
										</uni-forms-item>
										<uni-forms-item label="价格(元)" labelWidth="120" :key="item.id">
											<uni-easyinput type="number"
												v-model="formGGData.dynamicLists[index].goods_price"
												placeholder="请输入价格" />
										</uni-forms-item>
										<uni-forms-item label="重量" labelWidth="120" :key="item.id">
											<uni-easyinput type="number"
												v-model="formGGData.dynamicLists[index].goods_specifications_component"
												placeholder="请输入重量" />
										</uni-forms-item>
										<uni-forms-item name="goods_specifications_number" label="库存" labelWidth="120">
											<uni-easyinput type="number"
												v-model="formGGData.dynamicLists[index].goods_specifications_number"
												placeholder="请输入库存" />
										</uni-forms-item>
									</view>
									<view class="size-btn ml-2">
										<view class="iconfont icon-xinzeng font-big mr-2 text-danger"
											style="height: 80rpx;" @click="addDomain"></view>
										<view v-if="index > 0" class="iconfont icon-shanchu1 font-big text-danger"
											@click="del(index)" style="height: 80rpx;"></view>
									</view>
								</view>

							</uni-forms>
						</uni-forms-item> -->
					</view>
					<view class="">商品详情</view>
					<view class="page-body">
						<view class='wrapper'>
							<view class='toolbar' @tap="format" style="height: 360rpx;overflow-y: auto;">
								<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu"
									data-name="bold">
								</view>
								<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
									data-name="italic">
								</view>
								<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
									data-name="underline"></view>
								<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
									data-name="strike"></view>
								<!-- #ifndef MP-BAIDU -->
								<view :class="formats.align === 'left' ? 'ql-active' : ''"
									class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
								<!-- #endif -->
								<view :class="formats.align === 'center' ? 'ql-active' : ''"
									class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
								<view :class="formats.align === 'right' ? 'ql-active' : ''"
									class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
								<view :class="formats.align === 'justify' ? 'ql-active' : ''"
									class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
								<!-- #ifndef MP-BAIDU -->
								<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
									data-name="lineHeight" data-value="2"></view>
								<view :class="formats.letterSpacing ? 'ql-active' : ''"
									class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em">
								</view>
								<view :class="formats.marginTop ? 'ql-active' : ''"
									class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
									data-value="20px"></view>
								<view :class="formats.marginBottom ? 'ql-active' : ''"
									class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom"
									data-value="20px"></view>
								<!-- #endif -->

								<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>

								<!-- #ifndef MP-BAIDU -->
								<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
									data-name="fontFamily" data-value="Pacifico"></view>
								<view :class="formats.fontSize === '24px' ? 'ql-active' : ''"
									class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>
								<!-- #endif -->
								<view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
									class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
								<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
									class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00">
								</view>
								<view class="iconfont icon-date" @tap="insertDate"></view>
								<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
								<view :class="formats.list === 'ordered' ? 'ql-active' : ''"
									class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
								<view :class="formats.list === 'bullet' ? 'ql-active' : ''"
									class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>

								<view class="iconfont icon-undo" @tap="undo"></view>
								<view class="iconfont icon-redo" @tap="redo"></view>

								<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
								<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
								<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
								<view class="iconfont icon-charutupian" @tap="insertImage"></view>
								<view :class="formats.header === 1 ? 'ql-active' : ''"
									class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
								<view :class="formats.script === 'sub' ? 'ql-active' : ''"
									class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
								<view :class="formats.script === 'super' ? 'ql-active' : ''"
									class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>

								<view class="iconfont icon-shanchu" @tap="clear"></view>

								<view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
									class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
							</view>

							<view class="editor-wrapper">
								<editor id="editor" ref="editor" class="ql-container" placeholder="开始输入..."
									show-img-size show-img-toolbar show-img-resize @statuschange="onStatusChange"
									:read-only="readOnly" @ready="onEditorReady" @input="editorInput">
								</editor>
							</view>

						</view>
					</view>



					<button class="main-bg-color text-white font-md mb-4" @click="submit">确认</button>
				</view>



			</uni-forms>

		</scroll-view>
	</view>
</template>

<script>
	import title from "@/components/common/title.vue"
	import validate from "@/utils/validate.js"
	import uploadImage from "@/components/common/uploadImage.vue"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			title,
			uploadImage,
			cuCustom
		},
		data() {
			return {
				active: 1,
				scorllHeight: 500,
				imageValue: [],
				formData: {
					category: "",
					goods_name: "",
					supplier_cat_id: "",
					xfxz_goods_weight: "",
					market_price: "",
					goods_img: null,
					goods_shop_price: "",
					canhe_fee: "",
					goods_number: "",
					restricted_buy_status: "",
					first_buy: "",
					restricted_buy: "",
					restricted_buy_start: "",
					restricted_buy_end: "",
					sort_order: "",
					goods_contents: "",
					money: "",
					commitment: "",
					ava: "",
					start_time: "",
					end_time: "",
					goods_id: "",
					specifications_canhe_fee: "",
					goods_attribute: "",
					attribute_name: "",
					goods_describe: ""
				},
				rules: {
					// 对name字段进行必填验证
					goods_name: {
						rules: [{
							required: true,
							errorMessage: '请输入商品名称',
						}]
					},
					category: {
						rules: [{
							required: true,
							errorMessage: '请选择分类',
						}]
					},
					supplier_cat_id: {
						rules: [{
							required: true,
							errorMessage: '请选择店内分类',
						}]
					},
					xfxz_goods_weight: {
						rules: [{
							required: true,
							errorMessage: '请输入商品重量',
						}]
					},
					market_price: {
						rules: [{
							required: true,
							errorMessage: '请输入商品价格',
						}]
					},
					money: {
						rules: [{
							required: true,
							errorMessage: '请选择蟹券金额',
						}]
					},
					commitment: {
						rules: [{
							required: true,
							errorMessage: '请选择蟹券金额承担',
						}]
					},
					ava: {
						rules: [{
							required: true,
							errorMessage: '请选择蟹券使用条件',
						}]
					},
				},
				// formGGData: {
				// 	dynamicLists: [{
				// 		goods_specifications: "",
				// 		goods_price: "",
				// 		goods_specifications_component: null,
				// 		goods_specifications_number: null,
				// 		id: Date.now()
				// 	}]

				// },
				items: [{
						value: 0,
						name: '否',
					},
					{
						value: 1,
						name: '是'
					}
				],
				showInnav: 0,
				categoryList: [{
					value: 1,
					text: "商品"
				}],
				shopClassList: [],
				xqMoneyList: [],
				otherMoneyList: [],
				filterMoneyList: [],
				cat_item: null,
				isEdit: false,
				catId: null,
				readOnly: false,
				formats: {},
				recordData: "",
			}
		},
		onLoad(e) {
			if (e && e.id) {
				this.isEdit = true
				this.catId = e.id
			}
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(0)
				})
			})
			this.getShopClassList()
			this.getXqMoney()
			if (this.isEdit) {
				this.readOnly = true
				this.getShopItemInfo()
			}
		},
		onShow() {
		},
		methods: {
			editorInput(e){
				this.formData.goods_describe = e.detail.html
			},
			// 触发提交表单
			async submit() {
				this.$refs.form.validate().then(res => {
					let goods_specifications_list = []
					let goods_price_list = []
					let goods_specifications_component_list = []
					let goods_specifications_number_list = []
					// this.formGGData.dynamicLists.map((item) => {
					// 	goods_specifications_list.push(item.goods_specifications)
					// 	goods_price_list.push(item.goods_price)
					// 	goods_specifications_component_list.push(item.goods_specifications_component)
					// 	goods_specifications_number_list.push(item.goods_specifications_number)
					// })
					let params = Object.assign({}, {
						supplier_id: uni.getStorageSync('supplier_id'),
						goods_specifications: goods_specifications_list,
						goods_price: goods_price_list,
						goods_specifications_component: goods_specifications_component_list,
						goods_specifications_number: goods_specifications_number_list
					}, this.formData)


					if (this.isEdit) {
						params.goods_id = this.catId
						interceptor.post('/supplier_applet_api.php?act=editGoods', params).then((res) => {
							if (res.status === 1) {
								uni.showToast({
									title: '编辑成功',
									icon: "success",
									success() {
										uni.navigateTo({
											url: './shopList'
										})
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: "error"
								})
							}
						})
					}else{
						interceptor.post('/supplier_applet_api.php?act=addGoods', params).then((res) => {
							if (res.status === 1) {
								uni.showToast({
									title: "添加成功",
									icon: "success",
									success() {
										uni.navigateTo({
											url: './shopList'
										})
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: "error"
								})
							}
						})
					}

				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			checkIdCard(number) {
				let isIdcard = validate.isValidChineseID(number)
				if (!isIdcard) {
					uni.showToast({
						title: "身份证号码有误请检查",
						icon: 'none'
					})
				}
			},
			// addDomain() {
			// 	this.formGGData.dynamicLists.push({
			// 		goods_specifications: "",
			// 		goods_price: "",
			// 		goods_specifications_component: null,
			// 		goods_specifications_number: null,
			// 		id: Date.now()
			// 	})
			// },
			// del(index) {
			// 	this.formGGData.dynamicLists.splice(index, 1)
			// },
			showInNav(e) {
				this.showInnav = e.detail.value
				this.formData.restricted_buy_status = e.detail.value
			},
			getImgUrl(value) {
				this.imageValue = []
				this.formData.goods_img = value
				if(value){
					this.imageValue.push({
						url: this.returnImg(this.formData.goods_img)
					})
				}				
			},
			// 获取分类列表
			getShopClassList() {
				this.shopClassList = []
				interceptor.get('/supplier_applet_api.php?act=cateList', {
					supplier_id: uni.getStorageSync("supplier_id")
				}).then((res) => {
					if (res.status === 1) {
						const {
							info
						} = res
						let catList = JSON.parse(JSON.stringify(info.cat_info))
						// this.shopClassList = catList
						catList.map((item) => {
							item.text = item.cat_name
							item.value = item.cat_id
							if (item.children) {
								item.children.map((child) => {
									child.text = child.cat_name
									child.value = child.cat_id
								})
							}

						})
						this.shopClassList = catList
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取蟹券金额
			getXqMoney() {
				interceptor.get('/supplier_applet_api.php?act=selFirst', {
					type: 5
				}).then((res) => {
					res.info.map((item) => {
						item.value = item.val
					})
					this.xqMoneyList = res.info
				})
			},
			changeXqMoney(e) {
				this.otherMoneyApi(e)
			},
			// 第三方查询接口
			otherMoneyApi(id) {
				interceptor.get('/supplier_applet_api.php?act=selSecond', {
					type: 5,
					money: id
				}).then((res) => {
					res.info.map((item) => {
						item.value = item.val
					})
					this.otherMoneyList = res.info
				})
			},
			changeOtherMoney(e) {
				this.getFilterAPi(e)
			},
			// 查询使用条件接口
			getFilterAPi(id) {
				interceptor.get('/supplier_applet_api.php?act=selThird', {
					type: 5,
					money: this.formData.money,
					con: id
				}).then((res) => {
					if(res.info && res.infi.length > 0){
						res.info.map((item) => {
							item.value = item.val
						})
						this.filterMoneyList = res.info
					}
					
				})
			},
			// 分类选择器
			onpopupclosed() {
				//处理不同步
				this.$nextTick(() => {
					if (!this.cat_item) return
					this.onchange(this.cat_item)
				});
			},
			onchange(value) {
				this.formData.supplier_cat_id = value.id
			},
			onnodeclick(e) {
				//如果是子级e会有内置的parent_value，同时方便后台数据渲染添加
				this.cat_item = e
			},
			returnImg(img) {
				return `${getApp().globalData.baseUrl}/${img}`
			},
			// 根据ID 获取详情
			getShopItemInfo() {
				let params = {
					supplier_id: uni.getStorageSync('supplier_id'),
					goods_id: this.catId,
					supplier_status: 1
				}
				interceptor.get('/supplier_applet_api.php?act=editGoodsSub', params).then((res) => {
					if (res.status === 1) {
						this.formData = Object.assign({}, this.formData, res.info.goods)
						this.formData.ava = res.info.goods.ava_val
						this.formData.commitment = res.info.goods.commitment_val
						this.formData.supplier_cat_id = res.info.goods.cat_id
						this.imageValue.push({
							url: this.returnImg(this.formData.goods_img)
						})
						this.formData.goods_describe = res.info.goods.goods_describe
						this.editorCtx.setContents({
							html: this.formData.goods_describe
						})
						this.otherMoneyApi(this.formData.money)
						this.getFilterAPi(res.info.goods.commitment_val)
						this.readOnly = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				uni.showModal({
					title: '清空编辑器',
					content: '确定清空编辑器全部内容？',
					success: res => {
						if (res.confirm) {
							this.editorCtx.clear({
								success: function(res) {
									this.formData.goods_describe = ""
									console.log("clear success")
								}
							})
						}
					}
				})
			},
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.editorCtx.insertText({
					text: formatDate
				})
			},
			insertImage() {
				let _that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: getApp().globalData.baseUrl +
								`/supplier_applet_api.php?act=fileUploads`, // 服务器上传接口
							filePath: res.tempFilePaths[0],
							name: 'file', // 必须填写，后台用来接收文件
							formData: {
								'user_id': uni.getStorageSync('USER_ID') // 其他POST请求中的额外参数
							},
							success: function(uploadFileRes) {
								_that.editorCtx.insertImage({
									src: _that.returnImg(JSON.parse(uploadFileRes.data)
										.info),
									alt: '图像',
									success: function() {
										console.log('insert image success')
									}
								})
							},
							fail: function(uploadFileErr) {
								console.log(uploadFileErr); // 上传失败后的操作
							}
						});

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.step-box {
		background: #F8F8F8;
	}

	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;

		checkbox {
			border-radius: 15rpx;
			/* 可以根据需要调整圆角的大小 */
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.upload-box {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	::v-deep .uni-section {
		.uni-section-header {
			padding: 0 !important;
		}
	}

	.size {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #f2f2f2;

		.size-box {
			padding: 20upx;
			flex: 1;

			::v-deep .uni-easyinput__content {
				height: 60upx !important;
			}
		}

		.size-btn {
			width: auto;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
	}

	::v-deep .uni-forms-item {
		.uni-forms-item__label {
			font-weight: 500;
			font-size: 30rpx;
			color: #393F4C;
		}

		.uni-easyinput__content {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-select {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x--border {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x {
			background: transparent !important;
		}
	}
	
	::v-deep .input-value-border{
		border: 0;
		border-bottom: 2px solid #E1E5ED !important;
		border-radius: 0;
	}
	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}

	@import "./editor-icon.css";

	.page-body {
		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 40);
	}

	.wrapper {
		height: 100%;
	}

	.editor-wrapper {
		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
		background: #fff;
	}

	.iconfont {
		display: inline-block;
		padding: 8px 8px;
		width: 24px;
		height: 24px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}

	.ql-container {
		box-sizing: border-box;
		padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		height: 100%;
		margin-top: 20px;
		font-size: 16px;
		line-height: 1.5;
	}

	.ql-active {
		color: #06c;
	}
</style>